import {messages} from 'share/common';
import React, {Component} from 'react';
import {connect} from 'react-redux';
import menuRoute from 'routes/menuRoute';
import {Spin} from 'antd';
import NewConsumerServer from './new-consumer-server';
import 'styles/supplier-management/overview/supplier-dashboard.scss';

class ConsumerCardList extends Component {

  constructor(props) {
    super(props);
    this.state = {
      consumerOpenPage: menuRoute.getRouteItem('consumer-open-page', 'key'),
      vendorInfo: {
        openVendorsFailNumber: 0,
        openVendorsNumber: 0
      },
      openVendorsList: [],
      notOpenVendorsList: [],
      loading: false,
    };
  }

  componentWillMount() {
    NewConsumerServer(this).getCardList();
  }

  handleToControl = (item) => {
    this.context.router.push(this.state.consumerOpenPage.url.replace(':type', item.vendor));
  };

  supplierCardFun = (data, labelStyle) => {
    const {
      vendor, ico, type, name
    } = data;
    const vendorsLabel = type.split('|');
    return (
      <div className="supplier-box" key={vendor} onClick={() => this.handleToControl(data)}>
        <img src={ico} className="supplier-icon" />
        <div className="supplier-content-des">
          <h3 className="supplier-item-title">{name}</h3>
          <div>
            {
              vendorsLabel.map((item) => (<span key={item} className={labelStyle}>{item}</span>))
            }
          </div>
        </div>
      </div>
    );
  }

  render() {
    const {openVendorsList, loading, notOpenVendorsList} = this.state;
    return (
      <div className="supplier-dashboard">
        <Spin spinning={loading}>
          <div className="new-consumer-icon-style">
            <h3 className="description-title">{messages('supplier.key497')/* 已开通 */}</h3>
            <div className="description-text">
              {messages('supplier.key498')/* 请确保【APP应用管理-商务出行】中的消费商应用已开启，否则将无法在APP中看到此应用 */}
            </div>
            <div style={{display: 'flex', marginTop: 32, flexWrap: 'wrap'}}>
              {
                openVendorsList.map((item) => this.supplierCardFun(item, 'supplier-item-label supplier-item-label-on'))
              }
            </div>
          </div>
          <div className="new-consumer-icon-style" style={{marginTop: 30}}>
            <h3 className="description-title">{messages('supplier.key499')/* 未开通 */}</h3>
            <div className="description-text">
              {messages('supplier.key500')/* 集成的第三方消费商，可在线开通 */}
            </div>
            <div style={{display: 'flex', marginTop: 32, flexWrap: 'wrap'}}>
              {
                notOpenVendorsList.map((item) => this.supplierCardFun(item, 'supplier-item-label supplier-item-label-off'))
              }
            </div>
          </div>
        </Spin>
      </div>
    );
  }
}

ConsumerCardList.contextTypes = {
  router: React.PropTypes.object
};

function wrapperStateToProps(state) {
  return {};
}

export default connect(wrapperStateToProps)(ConsumerCardList);
